<template>
  <div class="container-user">
    <Search />
    <el-table :data="getUserList" style="width: 100%" v-loading="getLoading">
      <el-table-column
        label="#"
        width="60"
        type="index"
        :index="(getPager.currentPage - 1) * getPager.pageSize + 1"
      ></el-table-column>
      <el-table-column label="UID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.uid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="statusList[scope.row.status].type">
            <i :class="statusList[scope.row.status].icon"></i>
            <span>{{ statusList[scope.row.status].label }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.role }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="添加时间" width="120">
        <template slot-scope="scope">
          <span style="font-size:12px;">{{ scope.row.add_time }}</span>
        </template>
      </el-table-column>
       <el-table-column label="最后登录时间" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.last_time }}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editUser(scope.$index, scope.row)">编辑</el-button>
          <el-button v-has:delete="$route" size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Search from "./search";
//导入混合对象（可以包含组件中声明的各个参数项）
import systemUser from '@/mixins/systemUser.js';
export default {
  mixins:[systemUser],
  props: ["status"],
  data() {
    return {
      statusList: [
        {
          icon: "el-icon-time",
          type: "",
          label: "待激活"
        },
        {
          icon: "el-icon-success",
          type: "success",
          label: "正常"
        },
        {
          icon: "el-icon-lock",
          type: "warning",
          label: "已锁定"
        },
        {
          icon: "el-icon-circle-close",
          type: "info",
          label: "已停用"
        },
        {
          icon: "el-icon-delete",
          type: "danger",
          label: "已注销"
        }
      ]
    };
  },
  computed: {
    ...mapGetters("systemuser", [
      "getUserList",
      "getLoading",
      "getCurrentPage",
      "getPageSize"
    ])
  },
  components: {
    Search
  },
  methods: {
    editUser(index, item) {
      // console.log(index,item);
      this.$router.push("/dashboard/system/user/edit/" + item.uid);
    },
    deleteUser(index, item) {
      //调用一个确认模态框
      this.$confirm(
        `此操作将永久删除【${item.nickname}】, 是否继续？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(
        () => {
          //发起删除请求 ， 执行删除操作
          this.$http.deleteSystemAccount({ uid: item.uid }).then(res => {
            if (res && res.data.code == 200) {
              this.$message({
                type: "success",
                message: `您已经成功将【张三】删除~`
              });
              this.load();
            }
          });
        },
        err => {
          this.$message({
            type: "success",
            message: "您已经取消删除操作~"
          });
        }
      );
    }
  }
};
</script>

<style>
</style>